<template>
  <div
    class="showPanel flex flex-col gap-y-[20px] h-full animate__animated transitionPanel relative animate__fadeInLeft"
  >
    <div class="relative h-full text-[#fff]">
      <div
        class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 pt-[50px] pl-[10px] pb-[50px]"
      >
        <base-card class="flex-1 overflow-hidden" title="园区规上企业经营数据">
          <base-chart :options="topOption"></base-chart>
        </base-card>
        <base-card class="flex-1 overflow-hidden" title="企业年度工业产值">
          <base-table
            :auto-scroll="true"
            :show-tool="false"
            :column="column"
            :data-source="tableData"
            :show-pagination="false"
            class="reset-table"
          >
            <template #opt>
              <a-button type="link" size="small">查看详情</a-button>
            </template>
          </base-table>
        </base-card>
        <!--   园区用工总人数-->
        <base-card
          class="flex-1 overflow-hidden"
          title="行业年度产值增长趋势对比"
        >
          <base-chart :options="bottomOption"></base-chart>
        </base-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import BaseCard from "@/components/three/component/baseCard.vue";
import BaseChart from "@/components/three/component/baseChart/index.jsx";
import { onMounted, ref } from "vue";
import BaseTable from "@/components/three/component/baseTable/index.jsx";
import {
  getJJYXightData,
  getJJYXselectBusinessOperations,
  getJJYXselectIndustryTrends,
  getJJYXselectOutPut,
} from "@/api/dataScreen/dataScreen.js";
import { JJYXBottom } from "@/utils/constant.js";
import { getNumberToPercent } from "@/utils/index.js";
const topData = ref([]);
const topOption = ref({
  grid: {
    left: "12%",
    top: "15%",
    bottom: "15%",
    right: "8%",
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0.6)",
    borderWidth: "0",
    textStyle: {
      color: "#fff",
    },
    formatter: (params) => {
      console.log(params);
      let res = "";
      params.forEach((item) => {
        res += `${item.marker}${item.seriesName}：${item.data}<br/>`;
      });
      res += `<span style='margin-left: 16px'> 百分比：${getNumberToPercent(topData.value?.[params[0].dataIndex]?.proportion)}%</span> `;
      return res;
    },
  },
  xAxis: {
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255, 129, 109, 0.1)",
        width: 1,
      },
    },
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
  },
  legend: {
    textStyle: {
      color: "#fff",
    },
  },
  yAxis: [
    {
      type: "value",
      splitNumber: 2,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 129, 109, 0.1)",
          width: 1,
        },
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      areaStyle: {},
      splitLine: {
        show: true,
        lineStyle: {
          color: "#111",
          width: 1,
          type: "dashed",
        },
      },
    },
  ],
  series: [
    {
      name: "本月",
      type: "line",
      color: "red",
      barWidth: 40,
      showSymbol: false,
      label: {
        show: false,
        position: "top",
        distance: 15,
        fontWeight: "bolder",
        fontSize: 20,
      },
      itemStyle: {
        emphasis: {
          opacity: 1,
        },
      },
      data: [],
    },
    {
      name: "去年同期",
      type: "line",
      color: "#85DCF8",
      barWidth: 40,
      showSymbol: false,
      label: {
        show: false,
        position: "top",
        distance: 15,
        fontWeight: "bolder",
        fontSize: 20,
      },
      itemStyle: {
        emphasis: {
          opacity: 1,
        },
      },
      lineStyle: {
        type: "dashed",
      },
      data: [],
    },
  ],
});

const column = ref([
  {
    key: "name",
    align: "center",
    label: "企业名称",
  },
  {
    key: "value",
    align: "center",
    label: "当前月综合",
  },
  {
    key: "opt",
    align: "center",
    label: "操作",
    scopedSlots: { customRender: "opt" },
  },
]);
const tableData = ref([
  {
    name: "某某科技有限公司",
    nowMonth: "1000万",
    opt: "查看详情",
  },
]);
const bottomOption = ref({
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0.6)",
    borderWidth: 0,
    textStyle: {
      color: "#fff",
    },
  },
  legend: {
    textStyle: {
      color: "#fff",
    },
    top: "5%",
  },
  grid: {
    left: "10%",
    right: "10%",
    bottom: "15%",
    top: "20%",
  },
  xAxis: {
    type: "category",
    data: [],
    axisLine: {
      lineStyle: {
        color: "#fff",
      },
    },
    axisLabel: {
      color: "#fff",
    },
  },
  yAxis: {
    type: "value",
    axisLine: {
      lineStyle: {
        color: "#fff",
      },
    },
    axisLabel: {
      color: "#fff",
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "#555",
      },
    },
  },
  series: [
    {
      // name: "科技行业",
      // type: "line",
      // data: [120, 132, 101, 134, 90, 230],
      // lineStyle: {
      //   color: "#3FAA90",
      // },
      // itemStyle: {
      //   color: "#3FAA90",
      // },
      // areaStyle: {},
    },
  ],
});
onMounted(() => {
  getJJYXselectBusinessOperations().then((res) => {
    topData.value = res.data;
    topOption.value.series[0].data = res.data?.map((item) => item.thisYear);
    topOption.value.series[1].data = res.data?.map((item) => item.lastYear);
  });
  getJJYXselectOutPut({ pageNum: 1, pageSize: 500 }).then((res) => {
    tableData.value = res.rows;
  });
  getJJYXselectIndustryTrends().then((res) => {
    bottomOption.value.series = [];
    bottomOption.value.xAxis.data = [];
    let data = res.data;
    // let data = JJYXBottom;
    data.forEach((item, index) => {
      if (index == 0) {
        Array(item.data.length)
          .fill(0)
          .forEach((_, i) => {
            bottomOption.value.xAxis.data.push(i + 1 + "月");
          });
      }
      bottomOption.value.series.push({
        name: item.name,
        type: "line",
        data: item.data,
        areaStyle: {},
      });
    });
  });
});
</script>
<style scoped lang="less"></style>
